<template>
  <div class="news">
    <ul>
      <!-- 导航区 -->
      <li v-for="value in newsList" :key="value.id">


        <!-- query参数写法  -->
        <RouterLink :to="{
          name: 'detail',
          query: {
            id: value.id,
            title: value.title,
            content: value.content
          }
        }">{{ value.title }}</RouterLink>

        <button @click="showNewsDetail(value)">查看详情</button>

      </li>
    </ul>

    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
import { onBeforeMount, onMounted, onUnmounted, reactive, ref, toRefs } from 'vue';
import { RouterView, RouterLink, useRouter } from 'vue-router'

// const router = useRouter()

const data = reactive({
  newsList: [
    { id: 1, title: '新闻001', content: '新闻001的内容' },
    { id: 2, title: '新闻002', content: '新闻002的内容' },
    {
      id: 3, title: '罗永浩“爆锤”西贝后概念股大涨，二级市场的预制菜更香？',
      content: `预制菜及相关企业依然道阻且长`
    },
    { id: 4, title: '新闻004', content: '新闻004的内容 ' },
    {
      id: 5, title: '新闻005-罗永浩大战西贝：事情告一段落，问题并未解决',
      content: `罗永浩和西贝都偃旗息鼓了。
        9月15日下午西贝公开发表致歉信，随后不久罗永浩发布了一条决定放弃追究西贝的微博。
        这场持续数日的 “罗西大战”，历经几个攻守回合，吊足众人眼球。在罗永浩宣布放弃起诉后，看似暂告一段落。
        然而，一场口水仗背后的真问题究竟是什么？它为何能在过去的几十个小时里，引发亿万国人关注？热点即将落幕，给公共生活留下了什么？`
    },
  ]
})

function showNewsDetail(item: { id: number; title: string; content: string }) {
  const router = useRouter()
  // console.log('router:', router)
  // 跳转到详情页面
  // 自定义路由  导航 到详情页面
  router.push({
    name: 'detail',
    query: { id: item.id, title: item.title, content: item.content }
  })
}

onBeforeMount(() => {
  console.log('新闻组件即将挂载')
})

onMounted(() => {
  console.log('新闻组件挂载了')
})

onUnmounted(() => {
  console.log('新闻组件卸载了')
})

const { newsList } = toRefs(data)

</script>

<style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.news ul {
  margin-top: 30px;
  /* 移除默认的列表样式 */
  list-style: none;
  padding-left: 10px;
  /* 添加计数器重置 */
  counter-reset: news-counter;
}

.news li {
  /* 增加计数器 */
  counter-increment: news-counter;
  font-size: 18px;
  line-height: 40px;
}

.news li:before {
  /* 使用计数器作为内容 */
  content: counter(news-counter) ". ";
  /* 设置数字的颜色 */
  color: #64967E;
  font-weight: bold;
}

.news li>a {
  text-decoration: none;
  color: #64967E;
  /* text-shadow: 0 0 1px rgb(0, 84, 0); */
}

.news li>a:hover {
  color: #ffc268;
  font-weight: 900;
  transition: all 0.3s;
  font-family: 微软雅黑;
}

/* 当鼠标悬停在链接上时，让数字也变色 */
.news li:hover:before {
  color: #ffc268;
  font-weight: 900;
  transition: all 0.3s;
}

.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
  /* 设置一个透明度 */
  /* opacity: 0.2; */
  background-color: #bef7db;
}
</style>